<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="doPop()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>安全中心</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item detail (click)="pushAccount()">
      <ion-icon name="wallet" slot="start" class="color-orange"></ion-icon>
      <ion-label>存管账户</ion-label>
      <ion-note slot="end" [color]="!userInfo['paymentAccount'] ? 'tertiary' :  'medium'">{{(userInfo['paymentAccount'] | replace:'IDCard') || '未开户'}}</ion-note>
    </ion-item>
    <ion-item detail (click)="pushCard()">
      <ion-icon name="card" slot="start" class="color-orange"></ion-icon>
      <ion-label>银行卡</ion-label>
      <ion-note slot="end" [color]="!userInfo['card'] ? 'tertiary' :  'medium'">{{userInfo['card'] ? + userInfo['card'] + '张' : '未绑定'}}</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon name="person" slot="start" class="color-orange"></ion-icon>
      <ion-label>角色信息</ion-label>
      <ion-note slot="end">{{userInfo['userRole'] | i18nPlural:configService.roleStatus}}</ion-note>
    </ion-item>
    <ng-template [ngIf]="userInfo['userRole'] === 2">
      <ion-item detail (click)="pushSignLoan()">
        <ion-icon name="wallet" slot="start" class="color-orange"></ion-icon>
        <ion-label>借款签约</ion-label>
        <ion-note slot="end" [color]="userInfo['isSignLoan'] < 0 ? 'tertiary' :  'medium'">{{userInfo['isSignLoan'] | i18nPlural:configService.loanAndAdvanceStatus}}</ion-note>
      </ion-item>
      <ion-item detail (click)="pushAdvance()">
        <ion-icon name="wallet" slot="start" class="color-orange"></ion-icon>
        <ion-label>被担保签约</ion-label>
        <ion-note slot="end" [color]="userInfo['isAdvance'] < 0 ? 'tertiary' :  'medium'">{{userInfo['isAdvance'] | i18nPlural:configService.loanAndAdvanceStatus}}</ion-note>
      </ion-item>
    </ng-template>

    <ion-item detail (click)="pushPaymentPwd()">
      <ion-icon name="lock" slot="start" class="color-orange"></ion-icon>
      <ion-label>交易密码</ion-label>
      <ion-note slot="end" [color]="!userInfo['paymentAccount'] ? 'tertiary' :  'medium'">{{userInfo['paymentAccount'] ? '已设置' : '未开户'}}</ion-note>
    </ion-item>
    <ion-item detail (click)="openES()">
      <ion-icon name="ribbon" slot="start" class="color-orange"></ion-icon>
      <ion-label>电子签章</ion-label>
      <ion-note slot="end" [color]="userInfo['isSignature'] ? 'medium' : 'tertiary'">{{userInfo['isSignature'] ? '已认证' : '未认证'}}</ion-note>
    </ion-item>
    <ion-item detail>
      <ion-icon name="phone-portrait" slot="start" class="color-orange"></ion-icon>
      <ion-label>个人手机</ion-label>
      <ion-note slot="end" [color]="userInfo['mobile'] ? 'medium' : 'tertiary'">{{(userInfo['mobile'] | replace:'mobile') || '未绑定'}}</ion-note>
    </ion-item>
    <!--<ion-item detail>-->
      <!--<ion-icon name="mail" slot="start" class="color-orange"></ion-icon>-->
      <!--<ion-label>个人邮箱</ion-label>-->
      <!--<ion-note slot="end" [color]="userInfo['email'] ? 'medium' : 'tertiary'">{{(userInfo['email'] | replace:'email') || '未绑定'}}</ion-note>-->
    <!--</ion-item>-->
    <ion-item detail [routerLink]="['/auth/gesture-lock', {step: 0, isShowLink: false, canLeave: true}]">
      <ion-icon name="keypad" slot="start" class="color-orange"></ion-icon>
      <ion-label>手势解锁</ion-label>
      <ion-note slot="end" [color]="userInfo['isGestureLock'] ? 'medium' : 'tertiary'">{{userInfo['isGestureLock'] ? '已设置' : '未设置'}}</ion-note>
    </ion-item>
    <ion-item detail lines="none" [routerLink]="['/retrieve-password']">
      <ion-icon name="cloud-upload" slot="start" class="color-orange"></ion-icon>
      <ion-label>登录密码</ion-label>
      <ion-note slot="end">修改</ion-note>
    </ion-item>
  </ion-list>
  <div class="logout-box">
    <ion-button fill="clear" color="dark" (click)="confirmLogout()">安全退出</ion-button>
  </div>

</ion-content>
